<template>
  <div>
    <!--导航栏-->
    <Reception></Reception>
    <!--商家推荐-->
    <div class="recommend">
      <div class="recommend_title">
        <div>首页&emsp;/&emsp;名称</div>
        <div class="coll"><i class="el-icon-star-on"></i>点我收藏</div>
      </div>
      <div class="im">
        <img src="https://t7.baidu.com/it/u=1699747003,4225413511&fm=193&f=GIF" alt="" class="imga">
        <div class="imgb">
          <div class="fronta">aa</div>
          <div class="front">价格：<div class="price">99RMB</div></div>
          <div class="front">规格：<div>500kg</div></div>
          <div class="front">介绍：<div>sb</div></div>
          <div class="front">服务：<div>不支持退换货</div></div>
          <div class="front"><el-button type="warning">点 击 购 买</el-button></div>
        </div>
      </div>
      <div class="recommend_details">
        <el-tabs v-model="activeName" type="card">
          <el-tab-pane label="详情" name="details">
            <div class="detailsa">
              <div>aaaaaaaaaaaaaaaa</div>
              <img src="https://t7.baidu.com/it/u=1699747003,4225413511&fm=193&f=GIF" alt="" class="imga">
              <div>aaaaaaaaaaaaaaaa</div>
              <img src="https://t7.baidu.com/it/u=1699747003,4225413511&fm=193&f=GIF" alt="" class="imga">
            </div>
          </el-tab-pane>
          <el-tab-pane label="评论" name="comment">配置管理</el-tab-pane>
        </el-tabs>
      </div>


    </div>
  </div>
</template>

<script>
import Reception from "../../components/Reception";

export default {
  components: {
    'Reception': Reception
  },
  data(){
    return{
      activeName: 'details'
    }
  },
  methods: {
    recommend(){
      this.$router.push('/recommend')
    }
  }
}
</script>

<style scoped>
.recommend_title{
  font-size: 20px;
  background-color: #eeeeee;
  margin: 1% 10%;
  display: flex;
  justify-content: space-between;
  padding: 1% 1%;
}
.recommend_details{
  font-size: 20px;
  margin: 1% 10%;
}
.imga{
  width: 550px;
  height: 500px;
}
.imgb{
  font-size: 20px;
}
.im{
  display: flex;
  justify-content: center;
  margin: 0 18%;
  flex-wrap: wrap;
}
.coll{
  color: #FF8E01;
}
.front{
  display: flex;
  padding: 20px 50px;
}
.fronta{
  padding: 0 30px;
  font-size: 30px;
  font-weight: bold;
}
.price{
  color: red;
  font-weight: bold;
  font-size: 25px;
}
.detailsa{
  margin: 0 20%;
}




</style>